<template>
	<view class="container">
		<view class="list">
			<view v-for="(item, index) in list" :key="index" class="list-item">
				<view class="left">
					<view class="project">{{ item.projectName || '' }}</view>
					<view class="address">
						{{ item.projectName || '' }} {{ item.roomNum || '' }}
					</view>
				</view>
				<view class="center" v-if="item.status == 1">
					<view v-if="item.status == 1 && item.type == 1420200001">审核中</view>
					<view v-if="item.status == 1 && item.type != 1420200001">
						待业主确认
					</view>
				</view>
				<view class="center" v-if="item.status == 3">
					<view v-if="item.subStatus == 5">业主已拒绝</view>
					<view v-if="item.subStatus == 6">审核未通过</view>
				</view>
				<view class="right">
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/owner.png"
						v-if="item.type == 1420200001"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/qinshu.png"
						v-if="item.type == 1420200005"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/partner.png"
						v-if="item.type == 1420200007"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/tenant.png"
						v-if="item.type == 1420200006"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/children.png"
						v-if="item.type == 1420200004"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/spouse.png"
						v-if="item.type == 1420200002"
					></image>
					<image
						class="type"
						src="https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/parent.png"
						v-if="item.type == 1420200003"
					></image>
				</view>
			</view>
		</view>
		<view class="fixed-button">
			<button
				type="primary"
				:loading="loading"
				:disabled="loading"
				class="button"
				@click="toAdd"
			>
				新增
			</button>
		</view>
	</view>
</template>

<script>
import http, { customUrl, envVersion } from '@/common/request.js';
import { mapState } from 'vuex';
import { getCommonShareInfo } from '@/common/utils.js';
import aes from '@/common/aes.js';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	data() {
		return {
			loading: false,
			baseURL:
				'https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/personal/'
		};
	},
	onShow() {
		this.getList();
	},
	mounted(options) {},
	computed: {
		...mapState({
			list: state => state.houseSetting.houseList,
			userInfo: state => state.userInfo
		})
	},
	methods: {
		tabChange(index) {
			this.reset();
			this.getList();
		},
		reset() {
			//重置查询第一页
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			// this.list = [];
		},
		getList() {
			http('/api/mdmCustomerRoom/list', {
				method: 'GET'
			}).then(result => {
				if (result.success) {
					const list = result.data || [],
						roomIds = [];
					for (let item of list) {
						if (item.status === '1') {
							roomIds.push(item.roomId);
						}
					}
					this.$store.dispatch('houseSetting/updateHouseList', list);
					this.$store.dispatch('houseSetting/updateRoomIds', roomIds);
				}
			});
		},
		toAdd() {
			this.loading = true;
			let ctx = customUrl.bindHouseHost;
			if (envVersion === 'development') {
				ctx = customUrl.bindHouse;
			}
			const phonenumber = this.$store.state.userInfo.phonenumber;
			const raw = `pig:${phonenumber}:${Date.now()}`;
			http(
				ctx + '/api/auth/app/member/h5/passLogin',
				{ data: { sign: aes.encrypt(raw) } },
				{
					Authorization: 'Basic cGlnOnBpZw=='
				}
			)
				.then(({ code, data }) => {
					if (code === 0 && data) {
						const token = data.accessToken;
						const url =
							customUrl.bindHouseHost + '/bindHouse/login?token=' + token;
						// #ifdef H5
						location.href = url;
						// #endif
						// #ifdef MP-WEIXIN
						uni.navigateTo({
							url: '../home/web_view?url=' + encodeURIComponent(url),
							animationType: 'pop-in',
							animationDuration: 200
						});
						// #endif
					} else {
					}
				})
				.finally(() => {
					this.loading = false;
				});
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	padding: 24rpx 28rpx 128rpx 28rpx;
	.list {
		background-color: #ffffff;
		font-size: 30rpx;
		color: #66645d;
		margin: 0 -28rpx;
		padding: 0 28rpx;
		.list-item {
			padding: 29rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			.left {
				line-height: 42rpx;
				flex-grow: 1;
				.project {
					font-weight: 500;
					margin-bottom: 18rpx;
				}
				.address {
					font-weight: 300;
					font-size: 26rpx;
				}
			}
			.center {
				font-size: 24rpx;
				width: 160rpx;
				flex-shrink: 0;
				text-align: right;
			}
			.right {
				flex-shrink: 0;
				margin-left: 24rpx;
				position: relative;
				.type {
					width: 64rpx;
					height: 30rpx;
					margin-top: 2rpx;
				}
				// &::after {
				// 	content: '';
				// 	display: inline-block;
				// 	width: 16rpx;
				// 	height: 16rpx;
				// 	border: solid #66645d;
				// 	border-width: 4rpx 4rpx 0 0;
				// 	border-radius: 4rpx;
				// 	transform: rotate(45deg);
				// }
			}
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(102, 100, 93, 0.1);
				height: 2rpx;
				transform: scaleY(0.5);
			}
			&:last-child {
				&::after {
					display: none;
				}
			}
		}
	}
	.fixed-button {
		background: #fff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-top: 14rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		padding-bottom: 14rpx;
		padding-bottom: calc(14rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom));
		.button {
			font-size: 30rpx;
			font-weight: 400;
			color: #66645d;
			background: #facc6b;
			border-radius: 12rpx;
		}
	}
}
</style>
